<template>
	<view class="home-container">
		<!-- 顶部欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-header">
				<view class="welcome-text">
					<text class="welcome-title">早上好，{{ userInfo.name }}</text>
					<text class="welcome-date">今天是 {{ currentDate }}</text>
				</view>
				<view class="">
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;"
						src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face"
						mode="aspectFill"></image>
				</view>
				<!-- <view class="notification-btn" @click="showNotifications">
          <text class="iconfont icon-bell"></text>
        </view> -->
			</view>

			<!-- 今日概览 -->
			<view class="overview-grid">
				<view class="overview-item">
					<text class="overview-number">{{ todayStats.newCount }}</text>
					<text class="overview-label">今日新增</text>
				</view>
				<view class="overview-item">
					<text class="overview-number">{{ todayStats.processingCount }}</text>
					<text class="overview-label">处理中</text>
				</view>
				<view class="overview-item">
					<text class="overview-number">{{ todayStats.pendingCount }}</text>
					<text class="overview-label">待处理</text>
				</view>
			</view>
		</view>


		<view style="padding: 16px 24px; display: flex; flex-direction: column; gap: 16px;">
			<view style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;">
				<view
					style="background-color: white; border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
					<view style="display: flex; align-items: center; justify-content: space-between;">
						<view>
							<text style="color: #6b7280; font-size: 14px; display: block;">总项目数</text>
							<text
								style="font-size: 24px; font-weight: bold; color: #374151; display: block;">1,247</text>
						</view>
						<view
							style="width: 48px; height: 48px; background-color: #dbeafe; border-radius: 9999px; display: flex; align-items: center; justify-content: center;">
							<text class="fas fa-car" style="color: #2563eb; font-size: 20px;"></text>
						</view>
					</view>
				</view>

				<view
					style="background-color: white; border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
					<view style="display: flex; align-items: center; justify-content: space-between;">
						<view>
							<text style="color: #6b7280; font-size: 14px; display: block;">进行中</text>
							<text style="font-size: 24px; font-weight: bold; color: #ea580c; display: block;">89</text>
						</view>
						<view
							style="width: 48px; height: 48px; background-color: #ffedd5; border-radius: 9999px; display: flex; align-items: center; justify-content: center;">
							<text class="fas fa-clock" style="color: #ea580c; font-size: 20px;"></text>
						</view>
					</view>
				</view>
			</view>

			<view style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;">
				<view
					style="background-color: white; border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
					<view style="display: flex; align-items: center; justify-content: space-between;">
						<view>
							<text style="color: #6b7280; font-size: 14px; display: block;">已完成</text>
							<text
								style="font-size: 24px; font-weight: bold; color: #16a34a; display: block;">1,158</text>
						</view>
						<view
							style="width: 48px; height: 48px; background-color: #dcfce7; border-radius: 9999px; display: flex; align-items: center; justify-content: center;">
							<text class="fas fa-check-circle" style="color: #16a34a; font-size: 20px;"></text>
						</view>
					</view>
				</view>

				<view
					style="background-color: white; border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
					<view style="display: flex; align-items: center; justify-content: space-between;">
						<view>
							<text style="color: #6b7280; font-size: 14px; display: block;">预警项目</text>
							<text style="font-size: 24px; font-weight: bold; color: #dc2626; display: block;">12</text>
						</view>
						<view
							style="width: 48px; height: 48px; background-color: #fee2e2; border-radius: 9999px; display: flex; align-items: center; justify-content: center;">
							<text class="fas fa-exclamation-triangle" style="color: #dc2626; font-size: 20px;"></text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 快捷操作 -->
		<view class="quick-actions">
			<view class="action-grid">
				<view class="action-item" @click="navigateTo('/pages/vehicle-list/vehicle-list')" v-if="canAddVehicle">
					<view class="action-icon add-icon">
						<text class="iconfont icon-plus"></text>
					</view>
					<text class="action-text">新增车辆</text>
				</view>
				<view class="action-item" @click="navigateTo('/pages/monitor/monitor')" v-if="canViewMonitor">
					<view class="action-icon search-icon">
						<text class="iconfont icon-search"></text>
					</view>
					<text class="action-text">检测查询</text>
				</view>
				<view class="action-item" @click="navigateTo('/pages/alerts/alerts')" v-if="canManageDocuments">
					<view class="action-icon file-icon">
						<text class="iconfont icon-file"></text>
					</view>
					<text class="action-text">资料管理</text>
				</view>
				<view class="action-item" @click="navigateTo('/pages/monitor/monitor')" v-if="canViewStatistics">
					<view class="action-icon chart-icon">
						<text class="iconfont icon-chart"></text>
					</view>
					<text class="action-text">数据统计</text>
				</view>
				<view class="action-item" @click="navigateTo('/pages/permission/permission')" v-if="isAdmin">
					<view class="action-icon settings-icon">
						<text class="iconfont icon-cog"></text>
					</view>
					<text class="action-text">权限管理</text>
				</view>
			</view>
		</view>

		<!-- 状态分布 -->
		<view class="status-section">
			<view class="section-header">
				<text class="section-title">车辆状态分布</text>
				<text class="section-link" @click="navigateTo('/pages/vehicle-list/vehicle-list')">查看全部</text>
			</view>
			<view class="status-list">
				<view class="status-item" v-for="(item, index) in statusDistribution" :key="index">
					<view class="status-info">
						<view class="status-dot" :class="item.color"></view>
						<text class="status-name">{{ item.name }}</text>
					</view>
					<view class="status-count">
						<text class="count-number">{{ item.count }}</text>
						<text class="count-unit">辆</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 预警提醒 -->
		<view class="alerts-section">
			<view class="section-header">
				<text class="section-title">预警提醒</text>
				<text class="alert-count">{{ alerts.length }}条</text>
			</view>
			<view class="alerts-list">
				<view class="alert-item" v-for="(alert, index) in alerts" :key="index" :class="alert.type">
					<view class="alert-icon" :class="alert.iconClass">
						<text class="iconfont" :class="alert.icon"></text>
					</view>
					<view class="alert-content">
						<text class="alert-title">{{ alert.title }}</text>
						<text class="alert-desc">{{ alert.description }}</text>
					</view>
					<text class="alert-priority">{{ alert.priority }}</text>
				</view>
			</view>
		</view>

		<!-- 最近活动 -->
		<view class="activities-section">
			<view class="section-header">
				<text class="section-title">最近活动</text>
				<text class="section-link" @click="navigateTo('/pages/vehicle-list/vehicle-list')">查看全部</text>
			</view>
			<view class="activities-list">
				<view class="activity-item" v-for="(activity, index) in filteredActivities" :key="index">
					<view class="activity-icon" :class="activity.iconClass">
						<text class="iconfont" :class="activity.icon"></text>
					</view>
					<view class="activity-content">
						<text class="activity-title">{{ activity.title }}</text>
						<text class="activity-time">{{ activity.time }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		permissionManager,
		ROLES
	} from '../../utils/permission.js'

	// 响应式数据
	const userInfo = reactive({
		name: '张经理',
		role: permissionManager.getUserRoleInfo()
	})

	const currentDate = ref('2024年1月15日')

	const todayStats = reactive({
		newCount: 24,
		processingCount: 156,
		pendingCount: 8
	})

	const statusDistribution = ref([{
			name: '采购中',
			count: 12,
			color: 'blue-dot'
		},
		{
			name: '检测中',
			count: 8,
			color: 'yellow-dot'
		},
		{
			name: '过户中',
			count: 15,
			color: 'green-dot'
		},
		{
			name: '待出口',
			count: 23,
			color: 'purple-dot'
		}
	])

	const alerts = ref([{
			title: '检测超时',
			description: '3辆车检测超过24小时',
			type: 'urgent',
			priority: '紧急',
			icon: 'icon-exclamation',
			iconClass: 'urgent-icon'
		},
		{
			title: '过户延期',
			description: '5辆车过户资料不齐',
			type: 'warning',
			priority: '注意',
			icon: 'icon-clock',
			iconClass: 'warning-icon'
		}
	])

	const recentActivities = ref([{
			title: '新增车辆 BMW X5',
			time: '2分钟前',
			icon: 'icon-car',
			iconClass: 'blue-icon',
			visibleFor: [ROLES.PURCHASER, ROLES.ADMIN]
		},
		{
			title: '检测完成 Audi A6',
			time: '15分钟前',
			icon: 'icon-check',
			iconClass: 'green-icon',
			visibleFor: [ROLES.PURCHASER, ROLES.BUSINESS, ROLES.ADMIN]
		},
		{
			title: '装船完成 Mercedes C200',
			time: '1小时前',
			icon: 'icon-ship',
			iconClass: 'purple-icon',
			visibleFor: [ROLES.LOGISTICS, ROLES.ADMIN]
		}
	])

	// 计算属性
	const isAdmin = computed(() => {
		return userInfo.role.role === ROLES.ADMIN
	})

	const canAddVehicle = computed(() => {
		return permissionManager.canPerformOperation('create')
	})

	const canViewMonitor = computed(() => {
		return permissionManager.canAccessPage('monitor')
	})

	const canManageDocuments = computed(() => {
		return permissionManager.canPerformOperation('manage', 'documents')
	})

	const canViewStatistics = computed(() => {
		return permissionManager.canAccessPage('monitor')
	})

	const filteredActivities = computed(() => {
		const userRole = userInfo.role.role
		return recentActivities.value.filter(activity =>
			activity.visibleFor.includes(userRole) || activity.visibleFor.includes(ROLES.ADMIN)
		)
	})

	// 方法
	const navigateTo = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const showNotifications = () => {
		uni.showToast({
			title: '通知功能开发中',
			icon: 'none'
		})
	}

	// 生命周期
	onMounted(() => {
		// 获取用户信息
		getUserInfo()
		// 获取统计数据
		getStatistics()
	})

	const getUserInfo = () => {
		// 这里可以调用API获取用户信息
		console.log('获取用户信息')
	}

	const getStatistics = () => {
		// 这里可以调用API获取统计数据
		console.log('获取统计数据')
	}
</script>

<style scoped>
	.home-container {
		background-color: #f8fafc;
		min-height: 100vh;
	}

	.welcome-section {
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
		color: white;
		padding: 24px;
	}

	.welcome-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.welcome-text {
		flex: 1;
	}

	.welcome-title {
		font-size: 20px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.welcome-date {
		font-size: 14px;
		opacity: 0.8;
		display: block;
	}

	.notification-btn {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overview-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
	}

	.overview-item {
		text-align: center;
	}

	.overview-number {
		font-size: 24px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.overview-label {
		font-size: 12px;
		opacity: 0.8;
		display: block;
	}

	.quick-actions {
		padding: 16px;
	}

	.action-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 16px;
		margin-bottom: 24px;
	}

	.action-item {
		text-align: center;
	}

	.action-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 8px;
	}

	.add-icon {
		background-color: #dbeafe;
	}

	.search-icon {
		background-color: #dcfce7;
	}

	.file-icon {
		background-color: #fed7aa;
	}

	.chart-icon {
		background-color: #f3e8ff;
	}

	.settings-icon {
		background-color: #f1f5f9;
	}

	.action-text {
		font-size: 12px;
		color: #6b7280;
	}

	.status-section,
	.alerts-section,
	.activities-section {
		background: white;
		margin: 0 16px 16px;
		border-radius: 12px;
		padding: 16px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #1f2937;
	}

	.section-link {
		font-size: 14px;
		color: #3b82f6;
	}

	.alert-count {
		font-size: 14px;
		color: #ef4444;
	}

	.status-list,
	.alerts-list,
	.activities-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.status-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.status-info {
		display: flex;
		align-items: center;
	}

	.status-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-right: 12px;
	}

	.blue-dot {
		background-color: #3b82f6;
	}

	.yellow-dot {
		background-color: #f59e0b;
	}

	.green-dot {
		background-color: #10b981;
	}

	.purple-dot {
		background-color: #8b5cf6;
	}

	.status-name {
		font-size: 14px;
		color: #6b7280;
	}

	.status-count {
		display: flex;
		align-items: center;
	}

	.count-number {
		font-size: 14px;
		font-weight: 500;
	}

	.count-unit {
		font-size: 12px;
		color: #9ca3af;
		margin-left: 4px;
	}

	.alert-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-radius: 8px;
	}

	.alert-item.urgent {
		background-color: #fef2f2;
		border-left: 4px solid #ef4444;
	}

	.alert-item.warning {
		background-color: #fffbeb;
		border-left: 4px solid #f59e0b;
	}

	.alert-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.urgent-icon {
		background-color: #fee2e2;
	}

	.warning-icon {
		background-color: #fef3c7;
	}

	.alert-content {
		flex: 1;
	}

	.alert-title {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
		display: block;
		margin-bottom: 2px;
	}

	.alert-desc {
		font-size: 12px;
		color: #6b7280;
		display: block;
	}

	.alert-priority {
		font-size: 12px;
		color: #ef4444;
	}

	.activity-item {
		display: flex;
		align-items: center;
	}

	.activity-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.blue-icon {
		background-color: #dbeafe;
	}

	.green-icon {
		background-color: #dcfce7;
	}

	.purple-icon {
		background-color: #f3e8ff;
	}

	.activity-content {
		flex: 1;
	}

	.activity-title {
		font-size: 14px;
		color: #1f2937;
		display: block;
		margin-bottom: 2px;
	}

	.activity-time {
		font-size: 12px;
		color: #6b7280;
		display: block;
	}
</style>